<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <button id="btn01">点我发送请求 - $.ajax()</button>
    <script>
      const btn01 = document.querySelector('#btn01')

      const myAxios = options => {
        return new Promise((resolve, reject) => {
          $.ajax({
            ...options,
            success: res => {
              resolve({ data: res })
            },
            error: err => {
              reject(err)
            },
          })
        })
      }

      const getHot = () => {
        // 1. jq写法
        // $.ajax({
        //   method:'get',
        //   url:'http://pcapi-xiaotuxian-front-devtest.itheima.net/home/hot',
        //   success: (res)=>{
        //     console.log(res);
        //   }
        // })
        
        // 2. axios 写法
        // return axios({
        //   method: 'get',
        //   url: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/home/hot',
        // })
        
        // 3. 自己封装实现 axios
        return myAxios({
          method: 'get',
          url: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/home/hot',
        })
      }

      btn01.addEventListener('click', async () => {
        const { data } = await getHot()
        console.log(data)
      })
    </script>
  </body>
</html>
